<template>
	<!--
	<van-row justify="space-around" style="margin-top: 30px">
		<van-col span="9" class="a">
			<router-link  :to="{name:'AllDevices'}" style="color:black;">
				<van-image
					radius="10px"
					fit="contain"
					position="center"
					src="https://img1.baidu.com/it/u=793856324,1901551201&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"
				/>
				产线A
			</router-link>
		</van-col>
		<van-col span="9" class="a">
			<router-link  :to="{name:'AllDevices',query:{LindID:''}}" style="color:black;">
				<van-image
					radius="10px"
					fit="contain"
					position="center"
					src="https://img1.baidu.com/it/u=793856324,1901551201&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"
				/>
				产线A
			</router-link>
		</van-col>
	</van-row>
	-->
	<div class="Box">
		<div @click="go(item)" class="innerBox" v-for="(item) in Lines.lines" :key="item" >
			<img style="width:146px;height: 100px" src="https://img1.baidu.com/it/u=793856324,1901551201&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"
			/>
			<text>{{ item.name }}</text>
<!--			{{id}}-->
		</div>
	</div>
</template>

<script setup>
import {onMounted, reactive} from 'vue';
import {useStore} from 'vuex';
import {useRouter} from 'vue-router'
const router = useRouter()
const store = useStore();
const Lines = reactive({
	lines:[
		{
			name: '产线A',
			id: '001',
			src: "https://img1.baidu.com/it/u=793856324,1901551201&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
			devices:[
				{
					name:'电机1',
					deviceID:'0001'
				},
				{
					name: '电机2',
					deviceID: '0002'
				}
			]
		},
		{
			name: '产线B',
			id: '002',
			src: "https://img1.baidu.com/it/u=793856324,1901551201&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
			devices:[
				{
					name:'电机1',
					deviceID:'0001'
				},
				{
					name: '电机2',
					deviceID: '0002'
				}
			]
		}
	]
});

onMounted(()=>{
	console.log('LineScreen - mounted')
})
function go(item){
	// console.log(item)
	store.commit('setLineName',{LineID:item.id,LineName:item.name})

	router.push({
		name:'AllDevices',
		query:{
			LineID:item.id,
			LineName:item.name
		}
	})

}


</script>

<style scoped>
.a{
	border: #42b983 1px solid;
	border-radius: 10px;
	text-align: center;
}
.Box{
	display: flex;
	flex-wrap: nowrap;
}
.innerBox{
	width:50%;
	/*border: black 1px solid;*/
	border-radius: 10px;
	margin-top:30px;
	color:black;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
</style>